```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIRI - 开源AI虚拟数字伴侣</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        .gradient-text {
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 12px;
            color: white;
            font-size: 24px;
            margin-bottom: 20px;
        }
        .hero-section {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        }
        .section-divider {
            position: relative;
            height: 100px;
            overflow: hidden;
        }
        .section-divider svg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 5em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0.1em 0;
            color: #6366f1;
        }
    </style>
</head>
<body class="antialiased">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm py-4 sticky top-0 z-50">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <div class="flex items-center">
                <span class="text-2xl font-bold gradient-text">AIRI</span>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#features" class="text-gray-700 hover:text-purple-600 transition">核心功能</a>
                <a href="#scenarios" class="text-gray-700 hover:text-purple-600 transition">使用场景</a>
                <a href="#advantages" class="text-gray-700 hover:text-purple-600 transition">独特优势</a>
                <a href="#guide" class="text-gray-700 hover:text-purple-600 transition">上手指南</a>
                <a href="https://github.com/moeru-ai/airi" target="_blank" class="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-700 transition">GitHub</a>
            </div>
            <button class="md:hidden text-gray-700">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- Hero 区域 -->
    <section class="hero-section py-20">
        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">创造属于你的<span class="gradient-text">AI虚拟伴侣</span></h1>
                <p class="text-xl text-gray-600 mb-8">开源、可自托管的多模态AI平台，集实时语音、游戏互动与VTuber功能于一体</p>
                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                    <a href="https://github.com/moeru-ai/airi" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-md text-center transition">
                        <i class="fab fa-github mr-2"></i> GitHub 项目
                    </a>
                    <a href="#guide" class="bg-white hover:bg-gray-100 text-gray-800 px-6 py-3 rounded-md border border-gray-200 text-center transition">
                        <i class="fas fa-rocket mr-2"></i> 快速开始
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="relative">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1755743944686-dc8d2d33-33cb-4ef7-8932-634fe5f54ac4.png" alt="AIRI AI虚拟伴侣" class="rounded-xl shadow-xl w-full max-w-md">
                    <div class="absolute -bottom-4 -right-4 bg-purple-100 text-purple-800 px-4 py-2 rounded-lg shadow-md">
                        <i class="fas fa-heart mr-2"></i> 灵感来自 Neuro-sama
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 问题解决部分 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">AIRI 能解决什么问题？</h2>
                <div class="w-24 h-1 bg-purple-600 mx-auto"></div>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl card-hover">
                    <div class="text-purple-600 text-4xl mb-4">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">云服务依赖</h3>
                    <p class="text-gray-600">现有AI聊天平台依赖云服务，用户数据控制受限。AIRI提供自托管解决方案，确保隐私和数据安全。</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl card-hover">
                    <div class="text-purple-600 text-4xl mb-4">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">游戏互动缺失</h3>
                    <p class="text-gray-600">传统AI伴侣缺乏游戏互动功能。AIRI内置Minecraft和Factorio支持，实现真正的AI游戏伙伴体验。</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl card-hover">
                    <div class="text-purple-600 text-4xl mb-4">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">技术门槛高</h3>
                    <p class="text-gray-600">开发AI伴侣需要整合多种复杂技术。AIRI提供开箱即用解决方案，降低技术门槛。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 核心功能 -->
    <section id="features" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">核心功能概述</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">AIRI 整合了多项创新技术，打造全方位的AI虚拟伴侣体验</p>
                <div class="w-24 h-1 bg-purple-600 mx-auto mt-4"></div>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <div class="feature-icon">
                        <i class="fas fa-microphone"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-3">实时语音交互</h3>
                    <p class="text-gray-600 mb-6">支持浏览器或Discord语音输入，结合ElevenLabs语音合成技术，实现自然流畅的对话体验。</p>
                    
                    <div class="feature-icon">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-3">游戏互动能力</h3>
                    <p class="text-gray-600 mb-6">内置Minecraft和Factorio（开发中）支持，AI可理解自然语言指令，执行游戏任务，如建造或战斗。</p>
                </div>
                <div>
                    <div class="feature-icon">
                        <i class="fas fa-user-astronaut"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-3">VRM模型支持</h3>
                    <p class="text-gray-600 mb-6">兼容VRM 3D模型，包含自动眨眼、头部追踪和空闲动画，提升虚拟角色的真实感。</p>
                    
                    <div class="feature-icon">
                        <i class="fas fa-server"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-3">自托管与跨平台</h3>
                    <p class="text-gray-600 mb-6">支持Web、macOS和Windows，基于WebGPU和Tauri技术，允许本地运行或浏览器访问。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用场景 -->
    <section id="scenarios" class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">AIRI 的多功能性使其适用于多种场景</p>
                <div class="w-24 h-1 bg-purple-600 mx-auto mt-4"></div>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl card-hover">
                    <div class="bg-purple-100 text-purple-800 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-user-friends"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">个人娱乐与陪伴</h3>
                    <p class="text-gray-600">部署AIRI作为桌面伴侣，通过语音与虚拟角色聊天或一起玩Minecraft。AI可响应自然语言指令，提供沉浸式互动体验。</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl card-hover">
                    <div class="bg-purple-100 text-purple-800 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-video"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">VTuber内容创作</h3>
                    <p class="text-gray-600">VTuber主播使用AIRI的VRM模型和实时语音功能，结合OBS进行直播。AI可根据观众消息自动回应或执行游戏动作。</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl card-hover">
                    <div class="bg-purple-100 text-purple-800 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-flask"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">AI开发实验</h3>
                    <p class="text-gray-600">开发者利用AIRI的开源代码和模块化架构，测试多模态AI应用，如整合新的游戏或语音模型，探索AI伴侣的创新用途。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 独特优势 -->
    <section id="advantages" class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">优势与特色</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">相比其他AI虚拟角色或VTuber平台，AIRI具有独特优势</p>
                <div class="w-24 h-1 bg-purple-600 mx-auto mt-4"></div>
            </div>
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-code"></i>
                            </span>
                            完全开源
                        </h3>
                        <p class="text-gray-600">基于MIT许可证，代码公开，用户可自由修改或扩展，相比商业工具更灵活且无成本。</p>
                    </div>
                </div>
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-shield-alt"></i>
                            </span>
                            自托管与隐私
                        </h3>
                        <p class="text-gray-600">支持本地部署，用户拥有数据控制权，避免云服务的数据隐私风险。</p>
                    </div>
                </div>
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-puzzle-piece"></i>
                            </span>
                            多模态集成
                        </h3>
                        <p class="text-gray-600">结合语音识别、语音合成、游戏代理和3D模型动画，功能全面，超越单一聊天或VTuber工具。</p>
                    </div>
                </div>
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
                        <h3 class="text-xl font-semibold mb-3 flex items-center">
                            <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-globe"></i>
                            </span>
                            Web技术驱动
                        </h3>
                        <p class="text-gray-600">利用WebGPU、WebAudio和WebAssembly，支持浏览器运行，降低硬件依赖，适合移动设备或轻量部署。</p>
                    </div>
                </div>
            </div>
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-r-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-yellow-500 text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-lg font-medium text-yellow-800">当前限制</h3>
                        <div class="mt-2 text-yellow-700">
                            <p>AIRI仍处于开发阶段（最新版本v0.7），部分功能（如Factorio支持）尚未成熟，可能存在bug或性能问题。</p>
                            <p class="mt-2">部署需要一定的技术背景，如配置Node.js或Rust环境，对非开发者用户可能有一定门槛。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 上手指南 -->
    <section id="guide" class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">上手指南</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">快速开始使用AIRI的详细步骤</p>
                <div class="w-24 h-1 bg-purple-600 mx-auto mt-4"></div>
            </div>
            <div class="max-w-4xl mx-auto">
                <div class="mb-8">
                    <h3 class="text-2xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">1</span>
                        克隆仓库
                    </h3>
                    <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                        git clone https://github.com/moeru-ai/airi.git<br>
                        cd airi
                    </div>
                </div>
                <div class="mb-8">
                    <h3 class="text-2xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">2</span>
                        安装依赖
                    </h3>
                    <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                        corepack enable<br>
                        pnpm install<br>
                        # 开发Tamagotchi功能需安装Rust<br>
                        scoop install rustup # Windows<br>
                        sudo apt install libssl-dev libglib2.0-dev # Linux
                    </div>
                </div>
                <div class="mb-8">
                    <h3 class="text-2xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">3</span>
                        配置环境
                    </h3>
                    <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                        cp packages/agent/.env.example packages/agent/.env.local<br>
                        # 在.env.local中填入API密钥<br>
                        OPENAI_API_KEY=your_key<br>
                        ELEVENLABS_API_KEY=your_key
                    </div>
                </div>
                <div class="mb-8">
                    <h3 class="text-2xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">4</span>
                        运行AIRI
                    </h3>
                    <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono overflow-x-auto">
                        pnpm dev:tamagotchi # 启动桌面版本<br>
                        pnpm dev # 启动Web版本<br>
                        # 浏览器访问 http://localhost:3000
                    </div>
                </div>
                <div class="text-center mt-12">
                    <a href="https://github.com/moeru-ai/airi" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-md text-lg transition inline-flex items-center">
                        <i class="fab fa-github mr-2"></i> 访问GitHub获取完整文档
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据可视化 -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">AIRI 技术架构概览</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">核心组件与数据流可视化</p>
                <div class="w-24 h-1 bg-purple-600 mx-auto mt-4"></div>
            </div>
            <div class="max-w-4xl mx-auto bg-white p-8 rounded-xl shadow-sm">
                <div class="mermaid">
                    graph TD
                    A[用户输入] --> B[语音识别]
                    A --> C[文本输入]
                    B --> D[自然语言处理]
                    C --> D
                    D --> E[LLM处理]
                    E --> F[响应生成]
                    F --> G[语音合成]
                    F --> H[游戏指令]
                    G --> I[音频输出]
                    H --> J[游戏交互]
                    J --> K[游戏状态更新]
                    I --> L[用户]
                    K --> L
                    L --> A
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```